<template>
  <div class="app-container">
    <div class="container">
      <div class="export-button">
        <el-button type="primary" size="default" @click="exportExcel">导出</el-button>
      </div>
    </div>

    <div>
      <h1 style="font-size: 16px; width: 10%; margin: 20px auto">{{ lotNo }}手工人工明细</h1>
    </div>
    <table class="table" style="border-left: 1px solid black; border-right: 1px solid black; border-collapse: collapse">
      <thead>
        <tr>
          <th class="center" style="border: 1px solid black; text-align: center">序号</th>
          <th class="center" style="border: 1px solid black; text-align: center">工艺</th>
          <th class="center" style="border: 1px solid black; text-align: center" colspan="7">颜色/材料名称</th>
          <th class="center" style="border: 1px solid black; text-align: center">片数</th>
          <th class="center" style="border: 1px solid black; text-align: center">手工工价</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td class="center" style="border: 1px solid black">{{ item.seqNo }}</td>
          <td class="center" style="border: 1px solid black">{{ item.process }}</td>
          <td class="center" style="border: 1px solid black" colspan="7">{{ item.partName }}</td>
          <td class="center" style="border: 1px solid black">{{ item.pieceNum }}</td>
          <td class="center" style="border: 1px solid black">{{ item.price }}</td>
        </tr>
        <tr>
          <td colspan="10" class="text-right" style="border: 1px solid black">合计:</td>
          <td class="text-right" style="border: 1px solid black">{{ price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import axios, { AxiosError, type AxiosRequestHeaders, type AxiosResponse } from 'axios'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'craft'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, computed, onMounted } from 'vue'
import { useConfigureStore } from '@/stores/configure'
interface ResponseData<T> {
  code: number
  data: T
  message: string
}
// 添加请求拦截器
const fileRequest = axios.create({
  baseURL: '/kl',
  timeout: 5000000
})
// 添加请求拦截器
const useLoading = useConfigureStore()

fileRequest.interceptors.request.use((config) => {
  useLoading.startLoading()
  const token = localStorage.getItem('token')
  if (token) {
    ;(config.headers as AxiosRequestHeaders).Authorization = token
  } else {
    ;(config.headers as AxiosRequestHeaders).Authorization = `309_token`
  }
  config.responseType = 'blob'
  return config
})

// 添加响应拦截器
fileRequest.interceptors.response.use(
  /* 约束一下response */
  (response: AxiosResponse<ResponseData<any>>) => {
    useLoading.stopLoading()
    return response
    // let res = response.data;
    // if (res.code === 200) {
    // 	return res.data
    // } else {
    // 	return Promise.reject(response.data.message)
    // }
  }
)

// 导出方法
const exportExcel = async () => {
  const res = await fileRequest.get<any, any>(`/lotCost/analysis/manual/list/export?lotNo=${lotNo.value}`)
  const link = document.createElement('a') // 利用a标签自定义下载文件名
  let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
  link.style.display = 'none'
  //设置连接
  link.href = window.URL.createObjectURL(blob)
  const FileName = decodeURI(res.headers['content-disposition'].split(`filename=`)[1])
  link.download = FileName //自定义文件名字
  document.body.appendChild(link)
  //模拟点击事件
  link.click()
  document.body.removeChild(link)
}

// 配置新建一个 axios 实例
const service = axios.create({
  baseURL: '/kl',
  timeout: 500000
})

const tokenList = ref('')

// 添加请求拦截器
service.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) {
    ;(config.headers as any).Authorization = token
  } else {
    ;(config.headers as any).Authorization = `309_token`
  }
  return config
})

service.interceptors.response.use(
  /* 约束一下response */
  (response: AxiosResponse<ResponseData<any>>) => {
    let res = response.data
    if (res.code === 3) {
      JMessage.warning('登录超时请重新登录')
      sessionStorage.removeItem('Authorization')
      setTimeout(() => {
        window.location.href = '/'
      }, 1000)
    }
    if (res.code === 200) {
      return res.data
    } else {
      return res
    }
  }
)

const price = ref<any>(0)

const lotNo = ref<any>('')

const tableData = ref<any>([])

const lotNoDetailQueryMethods = async () => {
  try {
    let data = await service.get<any, any>(`/lotCost/analysis/manual/list?lotNo=${lotNo.value}`)
    tableData.value = data.map((item: any) => {
      price.value += item.price
      return item
    })
    price.value = Number(price.value).toFixed(2)
  } catch (error) {
    JMessage.error('查询失败')
  }
}

onMounted(() => {
  let list = localStorage.getItem('lotNo')
  const token = localStorage.getItem('Authorization')
  lotNo.value = list
  tokenList.value = token!

  lotNoDetailQueryMethods()
})
</script>

<style lang="less" scoped>
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  background-color: rgb(153, 204, 255);
  color: black;
  padding: 10px;
  text-align: left;
}

.table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.text-right {
  text-align: right;
  color: rgb(0, 0, 255);
}

.center {
  text-align: center;
}

.container {
  position: relative;
}

.export-button {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
